<template>
     
  <div class="">
    <van-row>
      <van-col span="24">
        <van-checkbox v-model="checkAll" checked-color="#ee0a24"
          >全选</van-checkbox
        >
      </van-col>
    </van-row>
    <van-row v-for="item in list" :key="item.shopid">
      <!-- 复选框 -->
      <van-col span="4">
        <van-checkbox v-model="item.checked" checked-color="#ee0a24"
          >复选框</van-checkbox
        >
      </van-col>
      <!-- 列表 -->
      <van-col span="20">
        <van-card
          :num="item.count"
          :price="item.price"
          :desc="item.goods_name"
          :title="item.goods_name"
          :thumb="$store.getters.host + item.icon"
        >
          <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">-</van-button>
            <van-button size="mini">+</van-button>
          </template>
        </van-card>
      </van-col>
    </van-row>
    <!-- 底部 -->
    <van-submit-bar :price="monery" button-text="提交订单" @submit="onSubmit">
      <van-button type="danger">删除所选</van-button>
    </van-submit-bar>
  </div>
</template>

<script>
import { getCartApi, buy } from "@/api/cart";
// @vuese
// @group cart
export default {
  name: "Cart",
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.getCart();
  },
  methods: {
    // @vuese
    // 获取购物车
    // @arg list[{uid,shopid,goods_id}]
    onSubmit() {
      const list = this.list
        .filter((item) => item.checked)
        .map((item) => {
          return {
            uid: item.uid,
            shopid: item.shopid,
            goods_id: item.goods_id,
          };
        });
      buy({ list }).then(({ data }) => {
        console.log(data);
      });
    },
    // @vuese
    // 获取购物车
    getCart() {
      getCartApi().then(({ data }) => {
        this.list = data.result.map((item) => {
          return {
            ...item,
            checked: false,
          };
        });
      });
    },
  },

  components: {},
  computed: {
    //提交

    monery() {
      //  1.先把出来勾选的数据
      // 2.把勾选的数据进行累加
      return (
        this.list
          .filter((item) => item.checked)
          .reduce((a, b) => {
            return a + b.count * b.price;
          }, 0) * 100
      );
    },

    checkAll: {
      //全选
      get() {
        return this.list.every((item) => item.checked);
      },
      set(state) {
        this.list.forEach((item) => {
          item.checked = state;
        });
      },
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
